<template>
	<div class="main" ref="main">
		<div class="header">
			<div class="top">
				<div class="logo">
					<img :src="logo" alt="">
				</div>
				<!--搜索框-->
				<div class="seek">
					<i></i>
					<span v-text="`搜索商品名称`"></span>
				</div>
				<!--用户-->
				<div class="avatar">
					<img :src="avatar" alt="">
				</div>
			</div>
			<div class="nav" ref="nav" v-if="nav.length">
				<ul class="navScroll">
					<li v-for="(item,i) in nav" @click="_navClick(i,item)" :key="i" :class="item.activate? 'activateList':'nav_list'">
						<span v-text="item.name"></span>
					</li>
				</ul>
				<div class="nav-display" ref="navIcon">
					<i class="down"></i>
				</div>
			</div>
		</div>
		<div class="content">
			<!--轮播-->
			<div class="carousel" ref="carousel" v-if="carousel.length">
				<div class="carousel_img_box" ref="imgBox">
					<div class="carousel_img" v-for="(item,i) in carousel" :key="i">
						<img :src="item" alt="">
					</div>
				</div>
				<!--圆点-->
				<div class="dot" ref="dot">
					<span v-for="i in carousel.length" :key="i" :class="{ active: i === banner.curIndex }"></span>
				</div>
			</div>
			<!--等分图标-->
			<div class="icon">
				<router-link to="/" v-for="item in icon" :key="item" class="icon_img">
					<img :src="item" alt="">
				</router-link>
			</div>
			<!--不规则布局-->
			<div class="irregularity_img">
				<div class="irregularity_img_left">
					<img :src="irregularity_img[0]" alt="">
				</div>
				<div class="irregularity_img_right">
					<div class="top_img">
						<img :src="irregularity_img[1]" alt="">
					</div>
					<div class="bottom_img">
						<img :src="irregularity_img[2]" alt="">
					</div>
				</div>
			</div>
			<!--页面主体-->
			<div class="content_main" ref="main">
				<template v-for="item in list">
					<div v-if="item.banner" class="con_banner">
						<img :src="item.src" alt="" class="con_banner_img">
					</div>
					<div v-if="item.title" class="con_title">
						<img :src="item.src" alt="" class="con_title_img">
					</div>
					<!--不是banner和title-->
					<div v-else-if="!item.banner && !item.title && !item.link" :class="item.center?'con_product_center':'con_product'">
						<template v-if="item.center !== 2"><!--用于设置不规则排列-->
							<div v-if="!item.divide" class="con_product_img"><!--商品图片-->
								<img :src="item.src" alt="">
							</div>
							<div v-if="!item.divide" class="con_product_details"><!--普通商品，附带左右布局的-->
								<p v-text="item.name" class="con_product_name"></p><!--商品名-->
								<p v-text="item.brief" class="con_product_brief"></p><!--简介-->
								<p class="con_product_priceBox">
									<!--价格-->
									<span v-text="item.price" class="con_product_price" :class="item.more ? 'more' :''"></span>
									<!--原价-->
									<span v-if="item.originally" v-text="item.originally" class="con_product_originally"></span>
								</p>
							</div>
						</template>
						<template v-else="item.center !== 2"><!--如果是2把信息和图片反过来-->
							<div v-if="!item.divide && item.center === 2" class="con_product_details"><!--普通商品，附带左右布局的-->
								<p v-text="item.name" class="con_product_name"></p><!--商品名-->
								<p v-text="item.brief" class="con_product_brief"></p><!--简介-->
								<p class="con_product_priceBox"><!--价格-->
									<span v-text="item.price" class="con_product_price" :class="item.more ? 'more' :''"></span>
									<span v-if="item.originally" v-text="item.originally"
									      class="con_product_originally"></span>
								</p>
							</div>
							<div v-if="!item.divide && item.center === 2" class="con_product_img"><!--商品图片-->
								<img :src="item.src" alt="">
							</div>
						</template>
						<div v-if="item.divide" class="content_banner"><!--没有商品名称和价格的图片-->
							<img :src="item.src" alt="">
						</div>
					</div>
				</template>
			</div>
		</div>
		<!--页脚-->
		<menus></menus>
	</div>
</template>

<script type="text/ecmascript-6">
    import {createNamespacedHelpers} from "vuex";
    import menus from "../components/MenusSlot";

    const {mapActions, mapState} = createNamespacedHelpers("home");
    import {Avatar, Logo, Zoom} from "./index.js";

    export default {//导出
        name: "index",
        inject:["reload"],
        components: {//注册组件不然不能使用
            menus
        },
        data(){
            return {
                name: "这是index",
                logo: Logo,
                avatar: Avatar,
	            banner:{//配置bscroll
                    isInit: false,                  //是否初始化
                    loop: true,                     // 是否无缝
                    autoPlay: true,              // 是否开启自动播放
                    interval: 5000,               // 自动播放的间隔时间
                    curIndex: 1,                   // 记录当前banner第几项处于激活
                    timer: null,                    // 保存自动轮播的计时器对象
                    speed: 600                    // 切换速度
	            }
            }
        },
        /*值是一个函数并且必须要有return*/
        computed: {
            /*计算属性*/
            ...mapState(["list", "nav", "carousel", "icon", "irregularity_img"]),
            isLogin(){//判断用户是否登录
                let cookie = document.cookie.split(";");
                let user = {};
                if(cookie.length){
                    for(let i = 0; i < cookie.length; i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user.userinfo = arr[1];
                            user.login = true;
                        }
                    }
                }
                return user;
            },
        },
        methods: { //存储方法往页面传方法
            _play() {//banner自动轮播
                clearTimeout(this.banner.timer);//清除之前的定时器，防止重复
                this.banner.timer = setTimeout(() => this.contentScroll.next(), this.banner.interval);//每隔一段时间跳转到下一个
            },
            _contentScroll(){//banner轮播/*默认Scroll是纵向滚动*/
                if(this.carousel.length > 0 && !this.contentScroll && !this.banner.isInit){
                    this.banner.isInit = true;
                    this.$ImgLoaded(this.$refs.carousel,() => {
                        let imgBox = this.$refs.imgBox;
                        let children_length = this.$refs.imgBox.children.length;
                        this.$refs.imgBox.style.width = this.banner.loop ?  ((children_length+2)*100)+"%" : (children_length*100)+"%";
                        this.contentScroll = new this.$BScroll(this.$refs.carousel,{
                            scrollY: false,
                            scrollX: true,                 // 开启横向滚动
                            momentum: false,        // 关闭better-scroll的惯性滑动
                            click:true,
                            snap: {
                                speed: this.banner.speed,  //切换速度
                                threshold: 0.1,  //滑动多少切换
                                loop: this.banner.loop  //是否无缝滚动
                            }
                        });
                        this.contentScroll.on("scrollEnd",()=>{
                            this.banner.curIndex = this.contentScroll.getCurrentPage().pageX+1;//默认从0开始所以加1
                            if(this.banner.autoPlay) this._play();//滚动结束调用函数
                        });
                        if(this.banner.autoPlay) this._play();//开启自动轮播调用函数
                    });
                }
            },
	        _navScroll(){//导航滚动
                if(this.nav.length < 1) return;//如果数据已经拿回来就不执行
                let length = this.$refs.nav.children[0].children.length;
                let navIconWidth = this.$refs.navIcon.clientWidth;//小图标的宽度
                let ulWidth = 0;//存储所有li的宽度
                for(let i=0;i<length;i++){
                    ulWidth+=this.$refs.nav.children[0].children[i].clientWidth;
                }
                this.$refs.nav.children[0].style.width = (ulWidth+navIconWidth)+"px";
                if(this.navScroll) return;
                this.navScroll = new this.$BScroll(this.$refs.nav,{
                    scrollY: false,
                    scrollX: true,                 // 开启横向滚动
                    momentum: false,
	                click:true  //可以点击
                })
            },
	        _navClick(i,item){//点击切换导航
                this.nav.find((item)=>{
                    item.activate = item.activate === true? false:false;
                });
                this.nav[i].activate = true;
	        },

        },
        /*生命周期钩子函数*/
        created(){//组件创建完毕
            this.$store.dispatch("home/init");//创建完毕调用仓库里的init函数发送ajax请求数据
            this.isLogin.login ? this.$store.dispatch("cart/init",this.isLogin.userinfo) : null;
        },
        mounted(){//dom挂载完毕

        },//组件挂载到页面完毕//类似于页面加载完成事件
        updated(){//组件更新完毕
            this._contentScroll();
            this._navScroll();
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	$down = ""
	$zoom = ""
	.main
		.header
			display flex
			flex-direction column
			position fixed
			top: -1px
			left: 0
			right: 0
			z-index: 99
			box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2)
			background: #f2f2f2
			.top
				display flex
				height 0.84rem
				align-items center
				.seek
					flex-grow 1
					border: 1px solid #e5e5e5
					height 0.6rem
					margin 0 0.1rem
					background-color white
					color: rgba(0, 0, 0, .3)
					text-align: left
					border-radius: .04rem
					line-height 0.6rem
					font-size 0.25rem
				.logo, .avatar
					flex-shrink 0
					margin 0 0.22rem
					img
						width 0.48rem
				.seek
					display flex
					align-items center
				.seek > i
					background-image url($zoom) /*使用变量*/
					display inline-block
					height 0.5rem
					width 0.5rem
					background-position center center
					background-repeat no-repeat
					background-size cover
			.nav
				overflow hidden
				position relative
				.nav-display
					width 0.68rem
					height .55rem
					position absolute
					top 0
					right  0%
					line-height: .55rem
					background-color: #f2f2f2
					box-shadow: -15px 0 30px 0 #f2f2f2
					z-index: 99
					text-align center
					.down
						background-image url($down)
						background-position center center
						background-repeat no-repeat
						background-size cover
						vertical-align: middle
						width: .4rem
						height: .4rem
						display inline-block
						transform: rotate(0deg);
						-webkit-transition: -webkit-transform .2s linear
						transition: -webkit-transform .2s linear
						transition: transform .2s linear
						-webkit-transform .2s linear
				ul.navScroll
					display flex
					.nav_list
						color rgb(116, 116, 116)
						border-color rgb(242, 242, 242)
					li
						display inline-block
						padding: 0 .25rem
						font-size: .26rem
						white-space: nowrap
						span
							display: inline-block
							line-height: .55rem
							border-bottom: 0.04rem solid rgba(237, 91, 0, 0)
					.activateList
						color rgb(237, 91, 0)
						span
							border-color rgb(237, 91, 0)

		.content
			margin-bottom 1.2rem
			.carousel
				margin-top 1.4rem
				overflow hidden
				width 100%
				position relative
				.carousel_img_box
					display flex
					.carousel_img
						flex-grow 1
						font-size 0
						img
							width 100%
				.dot
					position absolute
					width 100%
					bottom 0
					text-align center
					font-size 0
					span
						display inline-block
						width 0.18rem
						height 0.18rem
						margin auto 0.08rem 0.2rem
						border-radius 50%
						background-color rgba(100,100,100,0.3)
					.active
						background-color rgba(255,255,255,1)
			.icon
				width 100%
				background-color white
				font-size 0
				.icon_img
					width 20%
					display inline-block
					font-size 0
				.icon_img > img
					width 100%
			.irregularity_img
				font-size 0
				display flex
				justify-content space-between
				.irregularity_img_left, .irregularity_img_right
					width 49.5%
					font-size 0
					img
						width 100%
				.irregularity_img_right
					display flex
					flex-direction column
					justify-content space-between
			.content_main
				display flex
				flex-wrap wrap
				justify-content space-between
				.con_banner
					width 100%
					font-size 0
					img
						width 100%
				.con_title
					width 100%
					font-size 0
					img
						width 100%
				.con_product
						width 49.5%
						font-size 0
					.content_banner/*等分样式*/
						font-size 0
						margin-bottom 0.05rem
						img
							width 100%
					.con_product_img
						font-size 0
						img
							width 100%
					.con_product_details
						font-size .22rem
						padding 0.2rem
						.con_product_name
							font-size .28rem
							color black
						.con_product_brief
							margin 0.06rem 0
							font-weight 300
						.con_product_priceBox
							.con_product_price:before
								content "￥"
								display inline-block
								font-size .22rem
								text-align center
							.con_product_price
								color #ea625b
								font-size .28rem
							.con_product_price.more::after
								content "起"
								display inline-block
								font-size .22rem
								text-align center
							.con_product_originally
								text-decoration:line-through
							.con_product_originally:before
								content "￥"
								display inline-block
								font-size .20rem
								text-align center
				.list_action_title/*link标题*/
					display block
					width 100%
					border-top 0.01rem solid rgb(206, 206, 206)
					text-align center
					font-size 0.30rem
					padding 0.32rem 0
					a
						color: rgba(0,0,0,.6)
						position relative
					a:after
						display block
						position absolute
						font-size 0.35rem
						text-align center
						line-height 0.35rem
						content ">"
						right -0.4rem
						top 0
						bottom 0
				.center_last/*最后一个*/
					border-bottom: 0.01rem solid rgb(206, 206, 206)
				.con_product_center
					width 100%
					display flex
					.con_product_img
						width 50%
					.con_product_details
						width 50%
						padding 0.6rem 0.4rem
						.con_product_priceBox
							margin-top 0.2rem
</style>